import React, { useState, useEffect } from 'react'
import { useSearchParams } from 'react-router-dom';
import { useNavigate } from 'react-router-dom'
import { listfind, cate } from '../../https/index'
import { SearchBar, InfiniteScroll, Dropdown, Radio, Space } from 'antd-mobile';

export default function Lists() {
  const [searchParams, setSearchParams] = useSearchParams();
  const id = searchParams.get('id')
  const name = searchParams.get('name')
  const [list, setList] = useState([])
  const navigate = useNavigate()
  const [page, setPage] = useState(1)
  const [hasMore, setHasMore] = useState(true)
  const [sorter, setSorter] = useState('default')
  const [pr, setPr] = useState('default')

  const getList = async () => {
    const res = await listfind(id, page, name)
    setList(res.data.data)
  }

  const [cateList, setCateList] = useState([])
  const getCateList = async () => {
    const res = await cate()
    setCateList(res.data.categories)
  }

  useEffect(() => {
    setPage(1)
    getList()
    getCateList()
  }, [])

  const loadMore = async () => {
    const res = await listfind(id, page, name)
    setHasMore(res.data.data.length > 0)
    setPage(page + 1)
    setList([...list, ...res.data.data])
  }

  const newlist = () => {
    if (sorter === 'nearest') {
      return list.sort((a, b) => a.price - b.price)
    } else if (sorter === 'top-rated') {
      return list.sort((a, b) => b.price - a.price)
    } else if (pr === '0-100') {
      return list.filter((item) => item.price >= 0 && item.price <= 100)
    } else if (pr === '100-200') {
      return list.filter((item) => item.price >= 100 && item.price <= 200)
    } else if (pr === '200-300') {
      return list.filter((item) => item.price >= 200 && item.price <= 300)
    } else if (pr === '300-400') {
      return list.filter((item) => item.price >= 300 && item.price <= 400)
    } else if (pr === '400-500') {
      return list.filter((item) => item.price >= 400 && item.price <= 500)
    } else if (pr === '500-1000000') {
      return list.filter((item) => item.price >= 500)
    }
    return list
  }

  return (
    <div style={{ backgroundColor: '#f5f5f5' }}> {/* 添加京东风格背景色 */}
      {/* 顶部导航栏 - 使用京东红色系 */}
      <div style={{
        position: 'fixed',
        top: '0rem',
        paddingTop: '2rem',
        width: '120rem',
        height: '22rem',
        backgroundColor: '#e43130',  // 京东红
        zIndex: 100
      }}>
        <div style={{
          width: '120rem',
          backgroundColor: '#e43130',
        }}>
          <SearchBar
            placeholder='请输入内容'
            style={{
              width: '100rem',
              margin: 'auto',
              '--background': '#fff',
              '--border-radius': '20px',
              '--height': '7rem'
            }}
            onFocus={() => { navigate('/sousuo') }}
          />
        </div>
        <div style={{
          width: '120rem',
          backgroundColor: '#e43130',
          marginTop: '2rem',
          padding: '0 2rem'
        }}>
          <Dropdown>
            <Dropdown.Item key='sorter' title='价格'>
              <div style={{ padding: 12 }}>
                <Radio.Group defaultValue='default' onChange={(e) => {
                  setSorter(e)
                }}>
                  <Space direction='vertical' block>
                    <Radio block value='default'>
                      综合排序
                    </Radio>
                    <Radio block value='nearest'>
                      从低到高
                    </Radio>
                    <Radio block value='top-rated'>
                      从高到低
                    </Radio>
                  </Space>
                </Radio.Group>
              </div>
            </Dropdown.Item>
            <Dropdown.Item key='bizop' title='价格筛选'>
              <div style={{ padding: 12 }}>
                <Radio.Group defaultValue='default' onChange={(e) => {
                  setPr(e)
                }}>
                  <Space direction='vertical' block>
                    <Radio block value='default'>
                      全部
                    </Radio>
                    <Radio block value='0-100'>
                      0-100元
                    </Radio>
                    <Radio block value='100-200'>
                      100-200元
                    </Radio>
                    <Radio block value='200-300'>
                      200-300元
                    </Radio>
                    <Radio block value='300-400'>
                      300-400元
                    </Radio>
                    <Radio block value='400-500'>
                      400-500元
                    </Radio>
                    <Radio block value='500-1000000'>
                      500元以上
                    </Radio>
                  </Space>
                </Radio.Group>
              </div>
            </Dropdown.Item>
          </Dropdown>
        </div>
      </div>

      {/* 商品列表区域 */}
      <div style={{ marginTop: '25rem' }}>
        {newlist().map((item, index) => (
          <div key={index} style={{
            display: 'flex',
            height: '30rem',
            alignItems: 'center',
            margin: '6rem 2rem',
            backgroundColor: 'white',
            borderRadius: '0.8rem',
            boxShadow: '0 1px 3px rgba(0,0,0,0.1)'
          }} onClick={() => { navigate(`/productdetails?id=${item.id}`) }}>
            <div style={{
              width: '45rem',
              height: '30rem',
              backgroundColor: '#f5f5f5',
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center'
            }}>
              <img src={item.image} style={{
                width: '40rem',
                height: '25rem',
                borderRadius: '0.4rem'
              }} />
            </div>
            <div style={{ marginLeft: '3rem', flex: 1 }}>
              <p style={{ fontSize: '3.5rem', fontWeight: 'bold', marginBottom: '0.5rem' }}>{item.name}</p>
              <p style={{ fontSize: '3rem', color: '#666', marginBottom: '0.5rem' }}>{item.description}</p>
              <p style={{ fontSize: '3.5rem', color: '#e43130', fontWeight: 'bold' }}>￥{item.price.toFixed(2)}</p>
            </div>
          </div>
        ))}
        <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
      </div>
    </div>
  )
}
